<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#dynamic-table img {
		cursor: pointer;
	}
	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
</style>
<div class="page-header">
	<h1>
		轮播图管理
		<!-- <small>
			<a class="blue ml10 show-banner-dialog" href="#modal-banner" data-toggle="modal" data-id="" data-title="" data-sort="" data-image="" data-link="">
				<i class="fa fa-image"></i> 上传轮播图
			</a>
		</small> -->
		<a href="#modal-banner" class="show-banner-dialog btn btn-info a-custom" data-toggle="modal" data-id="" data-title="" data-sort="" data-image="" data-link="">
			<i class="ace-icon fa fa-image"></i> 上传轮播图
		</a>
	</h1>
</div>

<div class="col-xs-12">
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>轮播图图片</th>
				<th>轮播图标题</th>
				<th>轮播图排序</th>
				<th>轮播图链接</th>
				<th>上传时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<!-- 图片上传弹窗 -->
<div id="modal-banner" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					相册图片管理
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="banner-form">
							<input type="hidden" name="id" />
							<input type="hidden" name="banner_image" value="" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">轮播图标题：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="banner_title" placeholder="选填。请填写轮播图排序，根据序号从高往低排请填写轮播图标题"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">上传轮播图：</label>
								<div class="col-sm-6">
									<a href="javascript:;" id="upload-img">
										<img class="fit-cover" src="" width="160" height="160" />
									</a>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">轮播图排序：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="banner_sort" placeholder="选填。请填写轮播图排序，根据序号从高往低排"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">轮播图链接：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="banner_link" placeholder="选填。请填写轮播图链接"/>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-banner">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		var bannerForm = $("#banner-form");
		var uploadTarget = $("#upload-img");

		// 显示弹窗
		$("body").on("click", ".show-banner-dialog", function(){
			var imgLink = $(this).data("image");

			uploadTarget.find("img").attr("src", imgLink ? imgLink + '!thumb' : '<?=$staticAdminUrl?>assets/images/upload.png');
			bannerForm.find("[name=id]").val($(this).data("id"));
			bannerForm.find("[name=banner_title]").val($(this).data("title"));
			bannerForm.find("[name=banner_sort]").val($(this).data("sort"));
			bannerForm.find("[name=banner_link]").val($(this).data("link"));
			bannerForm.find("[name=banner_image]").val($(this).data("image"));

			setTimeout(function(){
				uploadTarget.uploader({
					"server":  '<?=UP_FORM_URL?>',
					"authorization": "<?=$signature?>",
					"policy": "<?=$policy?>",
					"callback": function(response) {
						var imgFile = "<?=UP_URL?>" + response.url;
						uploadTarget.find("img").attr("src", imgFile);
						bannerForm.find("[name=banner_image]").val(imgFile);
					}
				});
			}, 200)
		})
		// 删除轮播图
		$("body").on("click", ".delete-banner", function(e){
			var id = $(this).data("id");
			layer.confirm('确定删除该轮播图吗？', function(){
				// 提交数据
				var postUrl = "<?=admin_url('wx/delete_banner_action')?>";
				var postData = {"id": id};
				ajax_post(postUrl, postData, function(res){
					table.draw();
				})
			});
		})

		// 保存图片
		$("#save-banner").click(function(){
			bannerForm.submit();
		})
		var submitImgUrl = "<?=admin_url('wx/save_banner_action')?>";
		form_submit(bannerForm, submitImgUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) {
					$('#modal-banner').modal('hide');
					table.draw();
				}
			});
		})
		// 班级表格
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('wx/get_banner_list')?>',
			"columns": [
	            {"data": function(ret){
	                return '<div class="ace-thumbnails"><a href="' + ret.banner_image + '" data-rel="colorbox" class="cboxElement"><img src="' + ret.banner_image + '!thumb" width="64"/></a></div>';
	            }},
	            {"data": "banner_name"},
	            {"data": "banner_sort"},
	            {"data": "banner_link"},
	            {"data": "createtime"},
	            {"data": function(ret){
	            	var action = '';
	            	action += '<a class="show-banner-dialog green" href="#modal-banner" data-toggle="modal" data-id="'+ ret.id +'" data-title="'+ ret.banner_name +'" data-sort="'+ ret.banner_sort +'" data-image="'+ ret.banner_image +'" data-link="'+ ret.banner_link +'"><i class="fa fa-edit"></i> 修改</a>';
	            	action += '<a class="delete-banner red ml20" data-id="'+ ret.id +'"><i class="fa fa-times"></i> 删除</a>';
	                return action;
	            }},
			]
		});
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 100);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 1000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 2000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 3000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 5000);
	})
</script>